<template>
    <div>
        <!-- 搜索框 -->
        <div class="search">
            <div class="content" @click="toSearchPage">
                <img src="@/assets/images/search-white.png">
                <input type="text">
                <van-notice-bar :scrollable="false" background="transparent" color="#fefefe">
                    <van-swipe vertical class="notice-swipe" :autoplay="6000" :show-indicators="false">
                        <van-swipe-item v-for="(item, index) in hot" :key="index">{{ item }}</van-swipe-item>
                        <van-swipe-item>想租什么，就搜一搜</van-swipe-item>
                    </van-swipe>
                </van-notice-bar>
            </div>
            <City :flag="true"></City>
        </div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#168ce6">
            <van-swipe-item v-for="(item, index) in swipeData?.params" :key="index" @click="toGoods(item.url)">
                <!-- <img class="image" v-lazy="getHomeImageUrl(item.img)"> -->
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import City from "@/components/GoodsList/City.vue"
import { Swipe, SwipeItem, NoticeBar } from 'vant';
export default {
    name: "HeaderComponent.vue",
    props: {
        swipeData: Object,
    },
    data() {
        return {
            hot: [],
            swipeList: [],
        }
    },
    components: {
        City,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [NoticeBar.name]: NoticeBar,
    },
    created() {
        // this.getHotSearch();
    },
    methods: {
        getHotSearch() {
            this.$sendGet("Index/keywords")
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data;
                        this.hot.push(...data)
                    }
                })
        },
        toSearchPage() {
            this.$router.push({ name: "search" })
        },
        toGoods(url) {
            const goods_id = url.split("?")[1].split("=")[1];
            this.$router.push({ name: "goods", query: { goods_id } })
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-swipe__indicator {
    height: 4px;
    border-radius: 0;
}

::v-deep .van-swipe__indicator--active {
    width: 10px;
}

::v-deep .van-notice-bar {
    width: 200px;
    margin-left: 20px;
}

.my-swipe {
    height: 300px;
    margin-top: -40px;

    .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
    }

    .image {
        height: 100%;
    }
}

.notice-swipe {
    height: 40px;
    line-height: 40px;
}

.search {
    width: 375px;
    height: 45px;
    position: fixed;
    z-index: 1000;
    display: flex;
    top: 10px;
    padding: 5px 10px;
    align-items: center;
    justify-content: space-between;

    .content {
        height: 100%;
        display: flex;
        align-items: center;
        width: 280px;
        position: relative;
        margin-right: 10px;

        img {
            position: absolute;
            width: 25px;
            z-index: 9999;
            margin-left: 5px;
        }

        input {
            height: 100%;
            position: absolute;
            display: block;
            background-color: rgba(0, 0, 0, .3);
            border-radius: 18px;
            outline: 0;
            border: 0;
            width: 100%;
            padding: 5px 10px 5px 35px;
            color: #fefefe;

            &::placeholder {
                color: #fefefe;
            }

            .notice-swipe {
                z-index: 1000;
                position: absolute;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>